<script src="../node_modules/vue/dist/vue.js"></script>

<div id="app">
  <counter></counter>
  <counter></counter>
  <counter></counter>
  <button @click="inc">increment</button>
</div>

<script>
  function createStore({ state, mutations }) {
    return new Vue({
      data: { state },
      methods: {
        commit(type) {
          mutations[type](state)
        }
      }
    })
  }

  const store = createStore({
    state: { count: 0 },
    mutations: {
      inc(state) {
        state.count++
      }
    }
  })

  const Counter = {
    render(h) {
      return h('div', store.state.count)
    }
  }

  new Vue({
    el: '#app',
    components: { Counter },
    methods: {
      inc() {
        store.commit('inc')
      }
    }
  })

</script>